<template>
	<view class="business">
		<Navigation backType="back" title="city" background="#FABB3C" />
		<view class="pv-10 search ph-24">
			<u-search placeholder="快速查找戳我" v-model="listQuery.keyword" height="30" bgColor="#FFFFFF" searchIconColor="#999"
				placeholderColor="#999" :showAction="false" @search="toSearch">
			</u-search>
			<view class="w-100 search-btn"><u-button text="搜索" color="#FABB3C" shape="circle"
					@click.stop="toSearch"></u-button></view>
		</view>
		<view class="f-w h-80 tab pl-32 f ai-c">
			<u-tabs :list="statusList" lineColor="#FABB3C"  :current="statusCurt"
				:activeStyle="{ fontSize: '28rpx', color: '#222222', fontWeight: '600' }"
				:inactiveStyle="{ fontSize: '28rpx', color: '#999999' }" :itemStyle="{ paddingRight: '20rpx', height: '70rpx' }"
				keyName="name" @click="changeStatus"></u-tabs>

		</view>
		<scroll-view scroll-y="true" :style="{ height: height + 'px' }">
			<view class="ph-24">
				<view class="box mt-20 b-24 ph-28 pv-28 mb-8" v-for="(item, index) in list" :key="index"
					@click="toBusiness(item.id)">
					<view class="f ai-c jc-s-b">
						<image :src="item.picUrls[0]" v-if="item.picUrls" class="w-180 h-180 mr-24"></image>
						<view class="f f1 fd-c">
							<view class="fs-32 fw-600 text-color4 text-ellipsis-1">{{item.storeName}}</view>
							<view class="f mt-12">
								<image :src="index < item.storeScore ? star : starSelect" class="w-24 h-24 mr-8"
									v-for="(item, index) in 5" :key="index"></image>
							</view>
							<view class="f ai-c jc-s-b">
								<view class="f f1 text-ellipsis-1 fs-26 text-color4">{{item.storeAddress}}{{item.storeAddressDetail}}
								</view>
								<!-- <view class="fs-26 text-color3">1.6km</view> -->
							</view>
							<view class="mt-8">
								<text class="fs-22 text-color3">营业时间：</text>
								<text class="fs-22 text-color4">{{item.storeBusinessHours}}</text>
							</view>

						</view>
					</view>
					<view class="f ai-c jc-s-b mt-12">
						<view class="f f1 ai-c">
							<view class="f mr-15 ai-c">
								<view class="w-32 h-28 fs-20 text-color5 f ai-c jc-c mr-8 favour">惠</view>
								<view class="fs-26 fw-600 text-color7 mr-8">¥{{item.price}}</view>
								<view class="w-44 h-28 b-4 fs-20 text-color8 discount">{{item.discountPrice}}折</view>
							</view>
							<view class="f f1 text-ellipsis-1 fs-26 text-color4">{{item.name}} </view>
						</view>
						<view class="fs-26 text-color4">年售{{item.salesCount}}+</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	import { categoryList, listParentcodes } from '@/services/api/index/index';
	import { categoryTopList, servicePage } from '@/services/api/serve/index';

	const keyword = ref('');
	const statusList = ref<any>([]);
	const statusCurt = ref(0);
	const listQuery = ref({
		pageNo: 1,
		pageSize: 10,
		firstCategoryId: '',
		secondCategoryId: '',
		keyword: '',
		sortField: 'intelligent',
		sortAsc: false,
	});
	const list = ref<any>([]);
	onLoad((options : any) => {
		if (options.keyword) {
			listQuery.value.keyword = options.keyword;
		}
		if(options.index){
			statusCurt.value=options.index
		}
		if(options.cate_id){
			listQuery.value.firstCategoryId=options.cate_id
		}
		getCategoryList();
	});



	//获取列表
	async function getContentPage() {
		const { data } = await servicePage(listQuery.value);
		list.value = data.list
	}
	//获取一级分类
	async function getCategoryList() {
		const { data } = await categoryTopList({ spuType: 0, type: 1 });
	
		statusList.value = data
		getContentPage();
	}

	function toSearch() {
		listQuery.value.pageNo = 1;
		listQuery.value.keyword = keyword.value;
		list.value = [];
		getContentPage();
	}
	function onReachBottom() {
		listQuery.value.pageNo++;
		getContentPage();
	}
	const toBusiness = (id : number) => {
		uni.navigateTo({
			url: '/pages_serve/productDetails/index?id=' + id,
		});
	};
	const changeStatus = (data : any) => {
		// console.log(data)
		// statusCurt.value = data.id;
		listQuery.value.pageNo = 1;
		listQuery.value.firstCategoryId = data.id;
		list.value = [];
		getContentPage();
	};

	let systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let pageHeight = systemInfo.windowHeight;
	const height = pageHeight - statusBarHeight - 138;
</script>
<style lang="scss" scoped>
	.business {
		background: #f2f2f2;
		min-height: 100vh;

		.discount {
			background: #fff5f5;
		}

		.favour {
			background: #f54040;
		}

		.box {
			background: #fff;
		}

		.tab {
			background: #fff;
		}

		.search {
			position: relative;
			background: #fabb3c;

			.search-btn {
				position: absolute;
				right: 30rpx;
				top: 18rpx;
				z-index: 11;
			}

			::v-deep .u-button__text {
				font-size: 22rpx !important;
				font-weight: 400 !important;
			}

			::v-deep .u-button {
				height: 48rpx !important;
			}
		}
	}
</style>